<template>
	<view>
		<view class="top">
			<view class="dir-left-nowrap box cross-center">
				<view class="section1">
					<input type="number" class="box-grow-1 input" confirm-type="戒托价格区间" @input="input1" v-model="price1"
						placeholder="戒托价格区间">
					<view class="close-tip" v-if="price1" @click="clear(1)">
						<image class="search-close" src="/static/image/icon/delete-yuan.png"></image>
					</view>
				</view>
				<view class="sectionc">
					-
				</view>
				<view class="section1">
					<input type="number" class="box-grow-1 input" confirm-type="戒托价格区间" @input="input2" v-model="price2"
						placeholder="戒托价格区间">
					<view class="close-tip" v-if="price2" @click="clear(2)">
						<image class="search-close" src="/static/image/icon/delete-yuan.png"></image>
					</view>
				</view>
				<view class="dir-left-nowrap section2">
					<view class="sec-item" @click="search">
						搜索
					</view>
					<view class="sec-item" v-if="price1 != '' || price2 != ''" @click="clear(0)">
						清空
					</view>
				</view>
			</view>
		</view>
		<view style="height: 104rpx"></view>
		<!-- 查询钻石 -->
		<view class="goods-margin">
			<image class="zsjt" :src="imgprefix + '/web/uploads/logo/ring.png?timeout='+timeout" mode="widthFix">
			</image>
		</view>
		<!-- 说明 -->
		<view class="goods-margin">
			<image class="zsjt" :src="imgprefix + '/web/uploads/logo/ring2.png?timeout='+timeout" mode="widthFix">
			</image>
		</view>
		<view class="goods-list" v-if="list.length <= 0 && isSearch">
			<view class="main-center no-result">
				<view class="dir-left-nowrap cross-center">
					<image class="box-grow-0 empty" src="../../static/image/icon/empty.png"></image>
					<view class="box-grow-1">
						<view>抱歉，没有相关商品</view>
						<view v-if="!mch_id" class="text">以下是为您推荐的商品</view>
					</view>
				</view>
			</view>
		</view>
		<view style="background-color: #f7f7f7">
			<u-ordinary-list :reset="goodsReset" :pagination="true" :isShowAttr="true" :list="newList" :theme="getTheme"
				:list-style="2"></u-ordinary-list>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import uPopup from '../../components/basic-component/u-popup/u-popup.vue';
	import uOrdinaryList from '../../components/page-component/u-goods-list/u-ordinary-list.vue';

	let page = 1;
	let is_loading = false;
	let is_no_more = false;
	let mallurl = null

	export default {
		components: {
			uPopup,
			uOrdinaryList
		},
		data() {
			return {
				keyword: '戒托',
				list: [],
				goods_list: [],
				listpara: [],
				page_count: 1,
				imgprefix: this.$siteInfo.imgroot,
				timeout: new Date().getTime(),
				isshowe: false,
				customStyle: {
					// "top": "30rpx"
					'background-color': 'rgba(0, 0, 0, 0.2)',
					'backdrop-filter': 'blur(0rpx)'
				},
				shapeid: -1,
				goodsReset: false,
				loading: false,
				isSearch: false,
				price1: '',
				price2: '',
			}
		},
		computed: {
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
				getSetting: 'getSetting',
			}),
			newList() {
				if (this.list.length > 0) {
					return this.list;
				} else {
					return this.goods_list;
				}
			},
		},
		onLoad() {
			mallurl = this.$siteInfo.apiroot + '?_mall_id=2&r='
			this.loadlist()
		},
		/* onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				this.loadlist()
			}
		}, */
		onReachBottom() {
			if (is_no_more) {
				if (page < this.page_count) {
					page++
					this.loadlist()
				}
			} else {
				this.goodsReset = false;
				if (this.isSearch) {
					this.loading = true;
					this.getGoodsList();
				} else {
					if (page < this.page_count) {
						page++
						this.loadlist()
					}
				}
			}
		},
		methods: {
			input1(e) {
				this.price1 = e.detail.value
			},
			input2(e) {
				this.price2 = e.detail.value
			},
			clear(id) {
				uni.hideKeyboard()
				if (id == 0) {
					this.loading = false;
					is_loading = false
					this.isSearch = false;
					this.price1 = ''
					this.price2 = ''
					page = 1;
					is_no_more = false;
					this.goodsReset = true;
					this.list = []
					// this.list = this.goods_list
					this.goods_list = []
					this.loadlist();
				} else if (id == 1) {
					this.price1 = ''
					this.loading = false;
					is_loading = false
					this.isSearch = false;
					page = 1;
					is_no_more = false;
					this.goodsReset = true;
					this.list = []
					this.goods_list = []
					this.loadlist();
				} else if (id == 2) {
					this.price2 = ''
					this.loading = false;
					is_loading = false
					this.isSearch = false;
					page = 1;
					is_no_more = false;
					this.goodsReset = true;
					this.list = []
					this.goods_list = []
					this.loadlist();
				}
			},
			async loadlist() {
				let url = mallurl + this.$apiUrl.default.goods_list
				const res = await this.$request({
					url: url,
					method: 'get',
					data: {
						page: page,
						cat_id: 1315,
						sort: 1,
						sort_type: 1,
						keyword: '',
						sign: '',
						is_sales: 1
					}
				});
				if (res.code === 0) {
					this.page_count = res.data.pagination.page_count;
					this.goods_list = this.goods_list.concat(res.data.list)
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
			search() {
				if (this.price1 === '' || this.price2 === '') {
					uni.showToast({
						title: '请填入您需要搜索的价格区间',
						icon: 'none'
					})
					return;
				}
				// this.$showLoading();
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				// 搜索结果
				this.reset();
			},
			reset() {
				page = 1;
				is_no_more = false;
				this.loading = false;
				this.goodsReset = true;
				this.getGoodsList();
			},
			getGoodsList() {
				if (is_loading) return;
				is_loading = true;
				let url = mallurl + this.$apiUrl.default.goods_list
				this.$request({
					url: url,
					data: {
						keyword: '',
						cat_id: 1315,
						page: page,
						priceRange: {
							"price1": this.price1,
							"price2": this.price2
						}
					}
				}).then(response => {
					uni.hideLoading();
					is_loading = false;
					// this.$hideLoading();
					this.isSearch = true;
					this.loading = false;
					let {
						code,
						data,
						msg
					} = response;
					if (code === 0) {
						if (page === 1) this.list = [];
						if (data.list.length > 0) {
							this.list.push(...data.list);
							page++;
						} else {
							is_no_more = true;
							if (page === 1) this.loadlist();
						}
					} else {
						uni.showModal({
							content: msg
						})
					}
				}).catch(() => {
					uni.hideLoading();
					// this.$hideLoading();
					is_loading = false;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sectionc {
		width: 32rpx;
		text-align: center;
		font-size: 40rpx;
	}

	.section1 {
		position: relative;
		width: 240rpx;

		&+.section1 {
			margin-left: 24rpx;
		}

		.close-tip {
			position: absolute;
			right: 0;
			top: 0;
			width: #{64rpx};
			height: #{64rpx};
			margin-right: #{20rpx};
			z-index: 30;
		}

		.search-close {
			width: #{32rpx};
			height: #{32rpx};
			border-radius: 50%;
			margin: #{16rpx};
		}
	}

	.section2 {
		margin-left: 24rpx;
		text-align: center;
		width: 190rpx;

		.sec-item {
			// width: 95rpx;
			padding: 6rpx 0;
			width: 100%;
			border: 1rpx solid rgba($color: #000000, $alpha: .1);
		}
	}

	.top {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 15;
		padding: #{20rpx} #{16rpx};
		background-color: #F7F7F7;
		font-size: $uni-font-size-import-two;
		color: $uni-general-color-one;

		.input {
			width: 100%;
			background-color: #ffffff;
			border-radius: 15rpx;
			padding: 0 #{32rpx};
			font-size: $uni-font-size-general-one;
			height: #{64rpx};
			text-align: #c0c0c0;
			box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.1);
		}

		.box {
			position: relative;
			font-size: 28rpx;
		}
	}

	.goods-margin {
		width: 100%;
		margin: 20rpx auto 0;
		text-align: center;
	}

	.zsjt {
		width: 720rpx;
		margin: 0 auto;
		text-align: center;
	}

	.goods-list {
		background-color: #f7f7f7;

		.no-result {
			height: #{156rpx};
			padding: #{28rpx} 0;
			font-size: $uni-font-size-general-one;
			background-color: #ffffff;

			.text {
				color: $uni-general-color-two;
			}

			.empty {
				width: #{100rpx};
				height: #{100rpx};
				display: block;
				margin-right: #{40rpx};
			}
		}
	}
</style>
